<template>
  <div class="generated-design-container">
    <dynamic-renderer :components="components" :component-map="componentMap" @component-event="handleComponentEvent" />
  </div>
</template>

<script setup>
import { ref, shallowRef, defineAsyncComponent, h } from 'vue';

// 组件映射 (基础组件，可扩展)
const componentMap = shallowRef({
<% Object.keys(componentUsage).forEach(type => { -%>
  '<%- type %>': defineAsyncComponent(() => import('<%- componentUsage[type].importPath %>')),
<% }); -%>
  // Add more component imports here if needed
});

// 递归渲染组件的组件
const DynamicRenderer = {
  name: 'DynamicRenderer',
  props: {
    components: { type: Array, required: true },
    componentMap: { type: Object, required: true }
  },
  emits: ['component-event'],
  setup(props, { emit }) {
    const renderComponent = (componentData) => {
      const Component = props.componentMap[componentData.type];
      if (!Component) {
        console.warn(`Component type "${componentData.type}" not found in map.`);
        return h('div', `Component type "${componentData.type}" not found.`);
      }

      // 准备 props (过滤掉非 prop 属性，如 id, type, children, events)
      const nodeProps = { ...componentData.props };
      const style = { ...componentData.style }; // 直接使用 style 对象

      // 准备事件监听器
      const eventHandlers = {};
      if (componentData.events) {
        for (const eventName in componentData.events) {
          const handlerName = componentData.events[eventName];
          eventHandlers[eventName] = (...args) => {
            emit('component-event', componentData.id, eventName, handlerName, args);
          };
        }
      }

      // 递归渲染子组件
      const children = componentData.children?.map(child => renderComponent(child));

      // 处理文本内容 (针对 span 或类似组件)
      let nodeChildren = children;
      if (componentData.type === 'span' && componentData.props?.text) {
        nodeChildren = [componentData.props.text];
      } else if (componentData.type === 'el-button' && componentData.props?.label) {
        // Element Plus Button uses label prop, not children for text
      } else if (nodeChildren?.length === 0) {
        nodeChildren = undefined; // Avoid passing empty array if no children
      }

      return h(Component, { ...nodeProps, style, ...eventHandlers }, nodeChildren);
    };

    return () => props.components.map(comp => renderComponent(comp));
  }
};

// 设计器导出的组件数据结构
const components = ref(<%- JSON.stringify(components, null, 2) %>);

// 处理组件事件的回调 (在这里实现或调用外部方法)
const handleComponentEvent = (componentId, eventName, handlerName, args) => {
  console.log(`Event "${eventName}" triggered on component "${componentId}". Handler: "${handlerName}"`, args);
  // 在这里你可以根据 handlerName 调用具体的业务逻辑函数
  // 例如: if (handlerName === 'handleSubmit') { ... }
};

</script>

<style scoped>
.generated-design-container {
  position: relative; /* Or as needed based on root styles */
  width: 100%; /* Or as defined */
  height: 100%; /* Or as defined */
  /* Add any global styles from export if needed */
  <%- globalStyles %>
}

/* You might need to add global styles here if needed */
</style> 